<template>
  <div class="rich-text-wrapper">
    <div
      v-html="Ref"
      id="rich-Ref"
      ref="contentRef"
    ></div>
    <photo-swiper
      ref="photoswiper"
      v-if="photoSwiperUseable"
    ></photo-swiper>
  </div>
</template>
<script>
import photoSwiper from '@/components/photoSwiper/photoSwiper.vue';
const jQuery = require('jquery');

const MceHtmler = {
  name: 'mce-htmler',
  props: {
    authorInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    photoSwiperUseable: {
      type: Boolean,
      default: false
    },
    Ref: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  components: {
    photoSwiper
  },
  watch: {
    Ref(){
      if(this.Ref && this.Ref.length){
        this.clickImg();
      }
    }
  },
  mounted() {
    const self = this;
    let list = [];
    this.$nextTick(()=>{
        this.clickImg();
    })
  },
  computed: {},
  methods: {
    clickImg(){
        const self = this;
        let list = [];
        jQuery(this.$refs.contentRef).find('img').each(function(index, ele) {
          var $img = jQuery(ele);
          list.push({
            src: $img.attr('src'),
            thumbnail: $img.attr('src')
          });
          $img.bind('click', function() {
            self.$refs.photoswiper._open(list, index, self.authorInfo);
          });
        });
    }
  },
  install(Vue) {
    Vue.component('Mce-htmler', MceHtmler);
  }
};
export default MceHtmler;
</script>
<style lang="scss">
.rich-text-wrapper {
  color: #111a38;
  width: 100%;
  word-break: break-all;
    overflow: hidden;
    white-space: pre-wrap;
  em {
    font-style: italic;
  }
  img {
    cursor: pointer;
    max-width: 100%;
    height: auto;
  }
  a {
    text-decoration: none;
  }
  iframe {
    width: 100%;
  }
  p {
    line-height: 1.6;
    margin: 0px;
  }
  table {
    word-wrap: break-word;
    word-break: break-all;
    max-width: 100%;
    border: none;
    border-color: #999;
  }
  .mce-object-iframe {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  ul,
  ol {
    list-style-position: inside;
  }
  ul{
    list-style: inherit;
    list-style-position: inside;
  }
  li {
    list-style: inside;
  }
  strong {
    font-weight: bold;
  }
}
</style>
